<template>
<div class="liveList">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
      <el-button type="primary" @click="addLive">添加直播</el-button>
    </template>
    <el-form inline :model="model" @submit.prevent.native>
      <el-form-item label="标题:">
        <el-input v-model="model.title" clearable></el-input>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="editLive(row)">编辑</el-button>
          <el-popconfirm
            title="是否确认删除该直播？"
            @confirm="delLive(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    ref="yForm"
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    destroy-on-close
    width="900px"
    force-inner-scroll
    :form-attrs="forms.formAttrs"
    :columns="formColumns"
    @ensure="ensureModel">
  </y-form>
</div>
</template>

<script>
export default {
  name: "liveList",
  inject: ['getDictNameSync'],
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.applet.livePage,
        param: this.model
      }
    },
    formColumns(){
      return [
        {
          label: "直播标题",
          prop: "title",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 30,
              showWordLimit: true
            }
          }
        },
        {
          label: "直播图片",
          prop: "imgUrl",
          comp:{
            compType: 'YUploadImg',
            attrs:{
              url: this.forms.formModel.imgUrl ? [{
                url: this.forms.formModel.imgUrl,
                id: this.forms.formModel.imgAttachmentId
              }] : [],
              valueType: "ObjectArray",
              businessSysModuleCode: "LIVE",
              limit: 1,
              reUpload: true,
              cropperOptions:{
                fixedNumber: [25, 12]
              }
            },
            listeners:{
              update: this.updateModel
            }
          }
        },
        {
          label: "开始时间",
          prop: "liveTime",
          comp:{
            compType: 'datePicker',
            attrs: {
              type: "datetime",
              pickerOptions:{
                disabledDate(time) {
                  return time.getTime() < Date.now();
                }
              },
              valueFormat: 'yyyy-MM-dd HH:mm:ss'
            }
          }
        },
        {
          label: "直播类型",
          prop: "tag",
          comp:{
            compType: 'YCodeSelect',
            attrs: {
              dict: 'LIVE_TYPE'
            },
            listeners:{
              change: () => { this.forms.formModel.identity = '' }
            }
          }
        },
        {
          label: "直播标识",
          prop: "identity",
          vIf: !!this.forms.formModel.tag,
          comp:{
            compType: this.forms.formModel.tag === 'LIVE_TYPE_WECHAT' ? 'YCodeSelect' : 'input',
            attrs:{
              dict: 'WECHAT_CHANNELS_ID'
            }
          }
        },
        {
          label: "直播详情",
          prop: "intro",
          comp:{
            compType: 'YRichText',
            attrs:{
              businessSysModuleCode: 'LIVE'
            }
          }
        }
      ]
    }
  },
  data(){
    return{
      model: {
        title: ''
      },
      columns: [
        {
          prop: 'title',
          label: '标题',
          minWidth: 100
        },
        {
          prop: 'tag',
          label: '类型',
          formatter: (function(row){
            return this.getDictNameSync(row.tag, 'LIVE_TYPE');
          }).bind(this),
          minWidth: 100
        },
        {
          prop: 'liveTime',
          label: '开始时间',
          formatter(row){
            return (row.liveTime || '').replace('T', ' ');
          },
          minWidth: 180
        }
      ],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加直播',
          'EDIT': '编辑直播'
        },
        formModel:{
          title: '',
          imgAttachmentId: '',
          imgUrl: '',
          intro: '',
          liveTime: '',
          tag: '',
          identity: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            title: [{required: true, message: "请输入直播标题", trigger: "blur"}],
            imgUrl: [{required: true, message: "请上传直播图片", trigger: "change"}],
            intro: [{required: true, message: "请输入直播详情", trigger: "change"}],
            liveTime: [{required: true, message: "请选择直播开始时间", trigger: "change"}],
            tag: [{required: true, message: "请选择直播类型", trigger: "change"}],
            identity: [{required: true, message: "请选择直播标识", trigger: "change"}]
          }
        }
      },
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    addLive(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    editLive(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delLive(row){
      this.$yAxios({
        url: this.$api.applet.removeLive,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    updateModel({type, file}){
      switch(type) {
        case 'delete': {
          this.forms.formModel.imgAttachmentId = '';
          this.forms.formModel.imgUrl = '';
          break;
        }
        case 'edit': case 'add':{
          this.forms.formModel.imgAttachmentId = file.id;
          this.forms.formModel.imgUrl = file.name;
          this.$refs['yForm'].$refs['form'].validateField('imgUrl');
          break;
        }
      }
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = form;
      }
      this.$yAxios({
        url: this.$api.applet.saveLive,
        data: newForm,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search(this.forms.formsType === 'ADD');
      })
    }
  }
}
</script>

<style scoped>

</style>